<template>
  <div class="goods-detail">
    <!-- swiper -->
    <div class="swiper-wrapper">
      <swiper
        class="goodsimgs"
        indicator-dots="true"
        autoplay="true"
        interval="2000"
        duration="1000"
      >
        <swiper-item v-for="(item, index) of gallery" :key="item.id" :data-index="index">
          <img class="image" :src="item.imgUrl" background-size="cover">
        </swiper-item>
      </swiper>
    </div>

    <!-- title -->
    <div class="title-wrapper">
        <div class="title-text">
            <van-tag class="tag" color="#f29d38">热门</van-tag>吉祥一家人 - 蝴蝶谷两天一夜露营亲子活动大自然探索之旅含帐篷一顶
        </div>
        <div class="price">
            <span class="cur">169<span class="unit">元/人</span></span>
            <span class="orig">200<span class="unit">元/人</span></span>
        </div>
        <div class="goods-info">
            <van-row>
                <van-col span="12">
                    <div class="left">剩余：20</div>
                </van-col>
                <van-col span="12">
                    <div class="right">月销量：8</div>
                </van-col>
            </van-row>
        </div>
    </div>

    <!-- coupon -->
    <div class="coupon-wrapper">
        <div class="coupon ">
            <div class="coupon-intro">
                <div class="brief">100元优惠券</div>
                <ul>
                    <li>满任意金额使用</li>
                    <li>有效期：2019.09.20-2019.02.30 </li>
                </ul>
            </div>
            <div class="coupon-value">
                立即领取
            </div>
        </div>
    </div>
    <Gap></Gap>

    <!-- goods detail -->
    <div class="detail-wrapper">
        <div class="info">
            <div class="title">
                <van-icon name="column" color="#666" size="30rpx" />  商品详情
            </div>
            <div class="content">
                详情信息
                <img src="https://dummyimage.com/400x400/e1e1e1/000.png&text=1" alt="">
            </div>
        </div>
    </div>

    <!-- add cart -->
    <div class="bottom-wrapper">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon"/>
        <van-goods-action-icon icon="cart-o" text="购物车" info="5" @click="onClickIcon"/>
        <van-goods-action-button
          text="加入购物车"
          type="warning"
          custom-class="add-btn"
          @click="onClickButton"
        />
        <van-goods-action-button text="立即预定" custom-class="booking-btn" @click="onClickButton"/>
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import {get} from '../../../utils'
import Gap from '../../../components/gap/gap'

export default {
  props: {},
  data() {
    return {
        id: 0,

        gallery:[{id:""}]
    };
  },
  computed: {},
  created() {},
  mounted() {
    // if (this.$route.query.id) {
    //   this.id = parseInt(this.$route.query.id);
    // }
    this.getGoods()
  },
  watch: {},
  methods: {
      async getGoods(){
          const re = await get("/mock/good-detail.json")
          this.gallery = re.gallery
      }
  },
  components: {
      Gap
  }
};
</script>

<style lang="sass">
@import "../../../common/style/variable.sass"

.goods-detail
    position: absolute
    top: 0
    bottom: 90rpx
    overflow-y: auto
    .swiper-wrapper
        .goodsimgs
            width: 750rpx
            height: 750rpx
            .image
                width: 750rpx
                height: 750rpx
                background-color: #eee
    .title-wrapper
        margin: 15rpx
        .title-text
            font-size: 34rpx
            line-hight: 34rpx
            .tag
                margin: 0 14rpx
        .price
            font-size: 40rpx
            color: #f39c19
            margin-left: 10rpx
            .cur
                font-weight: bold
                .unit
                    font-size: 20rpx
            .orig
                padding-left: 30rpx
                color: #a1a1a1
                font-size: 28rpx
                text-decoration: line-through
        .goods-info
            margin: 20rpx 0rpx
            font-size: 20rpx
            color: #a1a1a1
            .right
                text-align: right
    .coupon-wrapper
        overflow: hidden
        background: $coupon-bg-color
        padding: 20rpx
        .coupon 
            display: flex
            align-items: stretch
            justify-content: stretch
            > div 
                padding: 10px 20px
                border-radius: $coupon-radius-size
            .coupon-intro 
                position: relative
                background: #f1f1f1
                flex: 3
                .brief
                    font-size: 30rpx
                    margin: 20rpx 0
                    font-weight: bold
                ul 
                    color: #aaa
                    font-size: 24rpx
                &:after 
                    content: ' '
                    border: 2px dashed $coupon-bg-color
                    height: 100%
                    position: absolute
                    top: 0
                    right: -2px
                    z-index: 2
            .coupon-value
                display: flex
                flex: 1
                position: relative
                background: #efac37
                color: #fff
                font-size: 30rpx
                align-items: center
                justify-content: center
                &:before 
                    content: ' '
                    width: $coupon-radius-size * 2
                    height: $coupon-radius-size * 2
                    position: absolute
                    top: -$coupon-radius-size
                    left: -$coupon-radius-size
                    border-radius: 100%
                    background: $coupon-bg-color
                &:after 
                    content: ' '
                    width: $coupon-radius-size * 2
                    height: $coupon-radius-size * 2
                    position: absolute
                    bottom: -$coupon-radius-size
                    left: -$coupon-radius-size
                    border-radius: 100%
                    background: $coupon-bg-color
    .detail-wrapper
        padding: 15rpx
        .info
            .title
                margin: 18rpx 0
                height: 40rpx
                line-hight: 40rpx
                font-size: 30rpx
                color: #666
                border-bottom: 1rpx solid #f1f1f1
        .content
            image
                width: 100%
    .bottom-wrapper
        .add-btn
            color: $theme-color
            background-color: $theme-light-color
            border-color: $theme-light-color
        .booking-btn
            color: $theme-font-color
            background-color: $theme-color
            border-color: $theme-color
</style>
